<template>
    <Dialog :title="title" :show="true" @close="close" :width="710" :height="735" :left="uiLeft" :top="uiTop"
        :isDblclick="true">
        <div class="box">
            <div class="box-left">
                <div class="btns">
                    <el-button @click="changeModel('sphere')">球体</el-button>
                    <el-button @click="changeModel('cube')">立方体</el-button>
                    <el-button @click="changeModel('cylinder')">圆柱体</el-button>
                    <!-- <el-button @click='pickMaterial' :class="{ 'active': isPickRef }">拾取</el-button> -->
                </div>
                <div :id="`materialContainer_${id}`" style="width: 100%;height:calc(100% - 40px)" @dragover.prevent
                    @drop="handleDrop"></div>
            </div>
            <div class="box-right">
                <div class="texture-content">
                    <div class="base-items">
                        <span>数据集：</span>
                        <div>{{ datasetName }}</div>
                        <!-- <div>1</div> -->
                    </div>
                    <div class="base-items">
                        <span>基础颜色：</span>
                        <div>
                            <el-color-picker v-model="baseColorFactor.value" show-alpha class="items-width-small" />
                        </div>
                        <!-- <div>1</div> -->
                    </div>
                    <!-- <div class="base-items">
                    <el-checkbox v-model="emissiveFactor.enable" />
                    <span>自发光颜色：</span>
                    <el-color-picker v-model="emissiveFactor.value" :disabled="!emissiveFactor.enable" show-alpha
                        class="items-width-small" />
                    </div> -->

                    <div class="base-items">
                        <span>金属度：</span>
                        <el-slider size="small" :max="1" :step="0.05" v-model.lazy="metallicFactor.value"
                            class="items-width-large" />
                        <!-- <div>1</div> -->
                    </div>
                    <div class="base-items">
                        <span>粗糙度：</span>
                        <el-slider size="small" :max="1" :step="0.05" v-model.lazy="roughnessFactor.value"
                            class="items-width-large" />
                        <!-- <div>1</div> -->
                    </div>
                    <div class="base-merge">
                        <div class="doubleSided-items">
                            <span>是否双面：</span>
                            <el-switch v-model="doubleSided.value" />
                        </div>
                        <div class="unlit-items">
                            <span>无光照：</span>
                            <el-switch v-model="unlit.value" />
                        </div>
                    </div>
                    <div class="base-items">
                        <span>透明模式：</span>
                        <el-select v-model="alphaMode.value" placeholder="请选择" class="items-width-large">
                            <el-option v-for="(item, index) in selectTransparent" :key="item.value" :label="item.type"
                                :value="item.value" />
                        </el-select>
                    </div>

                    <!-- 基础纹理 -->
                    <div class="base-texture">
                        <span>基础纹理：</span>
                        <el-input v-model="baseColorTexture.value" clearable />
                        <img src="../../../assets/cimrts/beautifyMaterails/choose.png"
                            @click="currentDialog = 'baseTexture'" alt="" style="cursor: pointer;" />
                        <!-- <div>1</div> -->
                    </div>
                    <div class="base-list">
                        <span>UV偏移：</span>
                        <el-input v-model="baseColorTexture.translate[0]" type="number" :step="0.1" :min="0" :max="1"
                            @change="handleBaseTranslateInput1" />
                        <el-input v-model="baseColorTexture.translate[1]" type="number" :step="0.1" :min="0" :max="1"
                            @change="handleBaseTranslateInput2" />
                    </div>
                    <div class="base-list">
                        <span>UV缩放：</span>
                        <el-input v-model="baseColorTexture.scale[0]" type="number" :step="0.001" :min="0.001"
                            @change="handleBaseScaleInput1" />
                        <el-input v-model="baseColorTexture.scale[1]" type="number" :step="0.001" :min="0.001"
                            @change="handleBaseScaleInput2" />
                    </div>
                    <div class="base-uv">
                        <span>UV旋转：</span>
                        <el-slider size="small" :max="360" :step="1" v-model="baseColorTexture.rotate" />
                    </div>


                    <!-- 法向纹理 -->
                    <div class="base-texture">
                        <span>法向纹理：</span>
                        <el-input v-model="normalTexture.value" clearable />
                        <img src="../../../assets/cimrts/beautifyMaterails/choose.png"
                            @click="currentDialog = 'normalTexture'" alt="" style="cursor: pointer;" />
                        <!-- <div>1</div> -->
                    </div>
                    <div class="base-list">
                        <span>UV偏移：</span>
                        <el-input v-model="normalTexture.translate[0]" type="number" :step="0.1" :min="0" :max="1"
                            @change="handleNormalTranslateInput1" />
                        <el-input v-model="normalTexture.translate[1]" type="number" :step="0.1" :min="0" :max="1"
                            @change="handleNormalTranslateInput2" />
                    </div>
                    <div class="base-list">
                        <span>UV缩放：</span>
                        <el-input v-model="normalTexture.scale[0]" type="number" :step="0.001" :min="0.001"
                            @change="handleNormalScaleInput1" />
                        <el-input v-model="normalTexture.scale[1]" type="number" :step="0.001" :min="0.001"
                            @change="handleNormalScaleInput2" />
                    </div>
                    <div class="base-uv">
                        <span>UV旋转：</span>
                        <el-slider size="small" :max="360" :step="1" v-model="normalTexture.rotate" />
                    </div>

                    <!-- 金属纹理 -->
                    <div class="base-texture">
                        <span>金属纹理：</span>
                        <el-input v-model="metallicRoughnessTexture.value" clearable />
                        <img src="../../../assets/cimrts/beautifyMaterails/choose.png"
                            @click="currentDialog = 'metallicRoughnessTexture'" alt="" style="cursor: pointer;" />
                        <!-- <div>1</div> -->
                    </div>
                    <div class="base-list">
                        <span>UV偏移：</span>
                        <el-input v-model="metallicRoughnessTexture.translate[0]" type="number" :step="0.1" :min="0"
                            :max="1" @change="handleRoughnessTranslateInput1" />
                        <el-input v-model="metallicRoughnessTexture.translate[1]" type="number" :step="0.1" :min="0"
                            :max="1" @change="handleRoughnessTranslateInput2" />
                    </div>
                    <div class="base-list">
                        <span>UV缩放：</span>
                        <el-input v-model="metallicRoughnessTexture.scale[0]" type="number" :step="0.001" :min="0.001"
                            @change="handleRoughnessScaleInput1" />
                        <el-input v-model="metallicRoughnessTexture.scale[1]" type="number" :step="0.001" :min="0.001"
                            @change="handleRoughnessScaleInput2" />
                    </div>
                    <div class="base-uv">
                        <span>UV旋转：</span>
                        <el-slider size="small" :max="360" :step="1" v-model="metallicRoughnessTexture.rotate" />
                    </div>

                    <div class="base-items">
                        <span>放大采样：</span>
                        <el-select v-model="magFilter.value" placeholder="请选择" class="items-width-large">
                            <el-option v-for="item in selectmagFilter" :key="item.value" :label="item.type"
                                :value="item.value" />
                        </el-select>
                    </div>
                    <div class="base-items">
                        <span>缩小采样：</span>
                        <el-select v-model="minFilter.value" placeholder="请选择" class="items-width-large">
                            <el-option v-for="item in selectminFilter" :key="item.value" :label="item.type"
                                :value="item.value" :title="item.type" />
                        </el-select>
                    </div>
                </div>
                <div class="texture-bottom">
                    <div class="bottom-left">
                        <!-- <el-button @click.stop="cancel">重置</el-button> -->
                    </div>
                    <div class="bottom-right">
                        <el-button @click.stop="close">取消</el-button>
                        <el-button @click.stop="confirm">确定</el-button>
                    </div>
                </div>
            </div>
        </div>
    </Dialog>
    <TexturePanel2 v-if="currentDialog == 'baseTexture'" :title="'选择纹理'" :isVisible="true"
        @close="currentDialog = undefined" @confirm="baseTextureConfirm" :datasetName="datasetName"
        :url="baseColorTexture.value" />
    <TexturePanel2 v-if="currentDialog == 'normalTexture'" :title="'选择纹理'" :isVisible="true"
        @close="currentDialog = undefined" @confirm="normalTextureConfirm" :datasetName="datasetName"
        :url="normalTexture.value" />
    <TexturePanel2 v-if="currentDialog == 'metallicRoughnessTexture'" :title="'选择纹理'" :isVisible="true"
        @close="currentDialog = undefined" @confirm="metallicRoughnessTextureConfirm" :datasetName="datasetName"
        :url="metallicRoughnessTexture.value" />
</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
import {
    createVueDisposer,
    toVR
} from "earthsdk-ui";
import TexturePanel2 from "./TexturePanel2.vue";
import { MaterialEditing } from "@/scripts/cimrtsManager/materialEditing";
import { convertRGBA, XEToRGBA } from "@/scripts/utils";
import { debounce } from 'lodash-es';

const props = withDefaults(defineProps<{ title: string, currentMaterail: any, id: string }>(), {});
const emits = defineEmits(["cancel", "confirm", "dragEvent"]);
const close = () => {
    emits("cancel", props.id);
};

const uiLeft = document.body.clientWidth - 10 - 710;
// const uiLeft = 10;

const uiTop = document.body.clientHeight - 735 - 40

const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();

const cimrtsManager = objm.cimrtsManager;

const materailsManager = objm.cimrtsManager.materailsManager as any

// cimrts服务ip
const cimrtsIpRef = toVR(d, [cimrtsManager, "cimrtsIp"]);
// 当前选中的材质
const currentMaterailRef = toVR<any>(d, [materailsManager, "currentMaterial"])

const currentDialog = ref<any>(undefined)

let materialEditing: any | undefined;
const changeModel = async (mode: 'sphere' | 'cube' | 'cylinder') => {
    materialEditing && materialEditing.changeModel(mode);
}

/**
 * 基础纹理选择
 * @param val 
 */
const baseTextureConfirm = (val: any) => {
    currentDialog.value = undefined
    baseColorTexture.value.value = `${val}`
}

/**
 * 法向纹理选择
 * @param val 
 */
const normalTextureConfirm = (val: any) => {
    currentDialog.value = undefined
    normalTexture.value.value = `${val}`
}

// 金属纹理选择
const metallicRoughnessTextureConfirm = (val: any) => {
    currentDialog.value = undefined
    metallicRoughnessTexture.value.value = `${val}`
}

const handleBaseScaleInput1 = (value: any) => {
    // 将输入值强制转换为数字，并确保不小于 0.1
    const numValue = Number(value);
    if (numValue < 0.001 || isNaN(numValue)) {
        baseColorTexture.value.scale[0] = 0.001;
    }
}

const handleBaseScaleInput2 = (value: any) => {
    // 将输入值强制转换为数字，并确保不小于 0.1
    const numValue = Number(value);
    if (numValue < 0.001 || isNaN(numValue)) {
        baseColorTexture.value.scale[1] = 0.001;
    }
}

const handleNormalScaleInput1 = (value: any) => {
    // 将输入值强制转换为数字，并确保不小于 0.1
    const numValue = Number(value);
    if (numValue < 0.001 || isNaN(numValue)) {
        normalTexture.value.scale[0] = 0.001;
    }
}
const handleNormalScaleInput2 = (value: any) => {
    // 将输入值强制转换为数字，并确保不小于 0.1
    const numValue = Number(value);
    if (numValue < 0.001 || isNaN(numValue)) {
        normalTexture.value.scale[1] = 0.001;
    }
}

const handleBaseTranslateInput1 = (value: any) => {
    // 将输入值强制转换为数字，并确保不小于 0.1
    const numValue = Number(value);
    if (numValue < 0 || isNaN(numValue)) {
        baseColorTexture.value.translate[0] = 0;
    }
}

const handleBaseTranslateInput2 = (value: any) => {
    // 将输入值强制转换为数字，并确保不小于 0.1
    const numValue = Number(value);
    if (numValue < 0 || isNaN(numValue)) {
        baseColorTexture.value.translate[1] = 0;
    }
}

const handleNormalTranslateInput1 = (value: any) => {
    // 将输入值强制转换为数字，并确保不小于 0.1
    const numValue = Number(value);
    if (numValue < 0 || isNaN(numValue)) {
        normalTexture.value.translate[0] = 0;
    }
}

const handleNormalTranslateInput2 = (value: any) => {
    // 将输入值强制转换为数字，并确保不小于 0.1
    const numValue = Number(value);
    if (numValue < 0 || isNaN(numValue)) {
        normalTexture.value.translate[1] = 0;
    }
}

const handleRoughnessTranslateInput1 = (value: any) => {
    // 将输入值强制转换为数字，并确保不小于 0.1
    const numValue = Number(value);
    if (numValue < 0 || isNaN(numValue)) {
        metallicRoughnessTexture.value.translate[0] = 0;
    }
}

const handleRoughnessTranslateInput2 = (value: any) => {
    // 将输入值强制转换为数字，并确保不小于 0.1
    const numValue = Number(value);
    if (numValue < 0 || isNaN(numValue)) {
        metallicRoughnessTexture.value.translate[0] = 0;
    }
}

const handleRoughnessScaleInput1 = (value: any) => {
    // 将输入值强制转换为数字，并确保不小于 0.1
    const numValue = Number(value);
    if (numValue < 0.001 || isNaN(numValue)) {
        metallicRoughnessTexture.value.scale[0] = 0.001;
    }
}

const handleRoughnessScaleInput2 = (value: any) => {
    // 将输入值强制转换为数字，并确保不小于 0.1
    const numValue = Number(value);
    if (numValue < 0.001 || isNaN(numValue)) {
        metallicRoughnessTexture.value.scale[1] = 0.001;
    }
}


// 基础颜色
const baseColorFactor = ref({
    value: 'rgba(255,255,255,1)'
})
// 自发光
const emissiveFactor = ref({
    value: 'rgba(255,255,255,1)'
})
// 金属度
const metallicFactor = ref({
    "value": 0
})

// 粗糙度
const roughnessFactor = ref({
    "value": 1
})
// 是否双面
const doubleSided = ref({
    "value": false
})

// 无光照
const unlit = ref({
    "value": false
})
const selectTransparent = ref([
    {
        type: '不透明',
        value: 'OPAQUE'
    },
    {
        type: '混合模式',
        value: 'BLEND'
    },
    {
        type: '遮罩模式',
        value: 'MASK'
    },

])
// 透明模式
const alphaMode = ref({
    "value": ""
})
// 基础纹理
const baseColorTexture = ref({
    "value": "",
    "translate": [
        0,
        0
    ],
    "scale": [
        1,
        1
    ],
    "rotate": 0
})

// 法向纹理
const normalTexture = ref({
    "value": "",
    "translate": [
        0,
        0
    ],
    "scale": [
        1,
        1
    ],
    "rotate": 0
})

// 金属纹理
const metallicRoughnessTexture = ref({
    "value": "",
    "translate": [
        0,
        0
    ],
    "scale": [
        1,
        1
    ],
    "rotate": 0
})

// 放大采样
const magFilter = ref({
    "value": null
})
const selectmagFilter = ref(
    [
        {
            type: 'NEAREST',
            value: 9728
        },
        {
            type: 'LINEAR',
            value: 9729
        },


    ]
)
// 缩小采样
const minFilter = ref({
    "value": null
})

const selectminFilter = ref(
    [
        {
            type: 'NEAREST',
            value: 9728
        },
        {
            type: 'LINEAR',
            value: 9729
        },
        {
            type: 'NEAREST_MIPMAP_NEAREST',
            value: 9984
        },
        {
            type: 'LINEAR_MIPMAP_NEAREST',
            value: 9985
        },
        {
            type: 'NEAREST_MIPMAP_LINEAR',
            value: 9986
        },
        {
            type: 'LINEAR_MIPMAP_LINEAR',
            value: 9987
        }

    ]
)

const serverParam = ref<any>({})

const uiParam = ref<any>({})

const confirm = async () => {
    console.log("param", serverParam.value);

    const param = JSON.stringify(serverParam.value)

    const data = {
        "tileServiceName": objm.cimrtsManager.tileServiceName,
        "materialId": props.id,
        "param": param
    }
    await materailsManager.updateMaterial(data)
    close()
    emits("confirm");
}



const datasetName = ref("");

// 设置材质
const setMaterial = (param: any) => {
    // 基础颜色
    baseColorFactor.value = {
        value: param.baseColorFactor ? XEToRGBA(param.baseColorFactor) : 'rgba(255,255,255,1)'
    }

    // 金属度
    metallicFactor.value = {
        "value": param.metallicFactor ? param.metallicFactor : 0
    }

    // 粗糙度
    roughnessFactor.value = {
        "value": param.roughnessFactor ? param.roughnessFactor : 0
    }
    // 是否双面
    doubleSided.value = {
        "value": param.doubleSided ? param.doubleSided : false
    }

    // 无光照
    unlit.value = {
        "value": param.unlit ? param.unlit : false
    }

    // 透明模式
    alphaMode.value = {
        "value": param.alphaMode ? param.alphaMode : "OPAQUE"
    }
    // 基础纹理
    baseColorTexture.value = {
        "value": param.baseColorTexture ? param.baseColorTexture : "",
        "translate": (param.baseTextureTranslate && param.baseTextureTranslate.length) ? param.baseTextureTranslate : [0, 0],
        "scale": (param.baseTextureScale && param.baseTextureScale.length) ? param.baseTextureScale : [1, 1],
        "rotate": param.baseTextureRotate ? param.baseTextureRotate : 0,
    }

    // 法向纹理
    normalTexture.value = {
        "value": param.normalTexture ? param.normalTexture : "",
        "translate": (param.normalTextureTranslate && param.normalTextureTranslate.length) ? param.normalTextureTranslate : [0, 0],
        "scale": (param.normalTextureScale && param.normalTextureScale.length) ? param.normalTextureScale : [1, 1],
        "rotate": param.normalTextureRotate ? param.normalTextureRotate : 0
    }

    // 金属纹理
    metallicRoughnessTexture.value = {
        "value": param.metallicRoughnessTexture ? param.metallicRoughnessTexture : "",
        "translate": (param.metallicRoughnessTextureTranslate && param.metallicRoughnessTextureTranslate.length) ? param.metallicRoughnessTextureTranslate : [0, 0],
        "scale": (param.metallicRoughnessTextureScale && param.metallicRoughnessTextureScale.length) ? param.metallicRoughnessTextureScale : [1, 1],
        "rotate": param.metallicRoughnessTextureRotate ? param.metallicRoughnessTextureRotate : 0
    }
    // 放大采样
    magFilter.value = {
        "value": (param.sampler && param.sampler.length) ? param.sampler[0] : null
    }
    // 缩小采样
    minFilter.value = {
        "value": (param.sampler && param.sampler.length) ? param.sampler[1] : null
    }
}

const init = async () => {
    // materialEditing && await materialEditing.updateMaterial("default")
    const param = JSON.parse(props.currentMaterail.param)
    datasetName.value = props.currentMaterail.dataset;
    setMaterial(param)
}

watch([magFilter, minFilter, baseColorFactor, emissiveFactor, metallicFactor, roughnessFactor, doubleSided, unlit, alphaMode, metallicRoughnessTexture, baseColorTexture, normalTexture], debounce(async () => {
    if (!baseColorFactor.value.value) {
        baseColorFactor.value.value = 'rgba(255,255,255,1)'
    }
    const param = JSON.parse(props.currentMaterail.param)

    serverParam.value = {
        baseColorFactor: convertRGBA(baseColorFactor.value.value),
        metallicFactor: metallicFactor.value.value,
        roughnessFactor: roughnessFactor.value.value,
        doubleSided: doubleSided.value.value,
        unlit: unlit.value.value,
        alphaMode: alphaMode.value.value,
        // 基础纹理
        baseColorTexture: baseColorTexture.value.value,
        baseTextureTranslate: [+baseColorTexture.value.translate[0], +baseColorTexture.value.translate[1]],
        baseTextureScale: [+baseColorTexture.value.scale[0], +baseColorTexture.value.scale[1]],
        baseTextureRotate: baseColorTexture.value.rotate,
        // 法向纹理
        normalTexture: normalTexture.value.value,
        normalTextureTranslate: [+normalTexture.value.translate[0], +normalTexture.value.translate[1]],
        normalTextureScale: [+normalTexture.value.scale[0], +normalTexture.value.scale[1]],
        normalTextureRotate: normalTexture.value.rotate,
        // 金属纹理
        metallicRoughnessTexture: metallicRoughnessTexture.value.value,
        metallicRoughnessTextureTranslate: [+metallicRoughnessTexture.value.translate[0], +metallicRoughnessTexture.value.translate[1]],
        metallicRoughnessTextureScale: [+metallicRoughnessTexture.value.scale[0], +metallicRoughnessTexture.value.scale[1]],
        metallicRoughnessTextureRotate: metallicRoughnessTexture.value.rotate,
        // @ts-ignore
        sampler: [+magFilter.value.value, +minFilter.value.value, param.sampler[2], param.sampler[3]]
    }

    const material: any = {}
    material.baseColorFactor = [...convertRGBA(baseColorFactor.value.value)]
    material.metallicFactor = metallicFactor.value.value
    material.roughnessFactor = roughnessFactor.value.value
    material.doubleSided = doubleSided.value.value
    material.unlit = unlit.value.value
    material.alphaMode = alphaMode.value.value

    material.magFilter = selectmagFilter.value.find((item) => item.value == magFilter.value.value)?.type
    material.minFilter = selectminFilter.value.find((item) => item.value == minFilter.value.value)?.type

    if (baseColorTexture.value.value) {
        material.baseColorTexture = {
            value: `${cimrtsIpRef.value}/ds/featuretiles/${datasetName.value}/${baseColorTexture.value.value}`,
            offset: baseColorTexture.value.translate,
            scale: baseColorTexture.value.scale,
            rotate: baseColorTexture.value.rotate,
        }
    }
    if (normalTexture.value.value) {
        material.normalTexture = {
            value: `${cimrtsIpRef.value}/ds/featuretiles/${datasetName.value}/${normalTexture.value.value}`,
            offset: normalTexture.value.translate,
            scale: normalTexture.value.scale,
            rotate: normalTexture.value.rotate,
        }
    }

    if (metallicRoughnessTexture.value.value) {
        material.metallicRoughnessTexture = {
            value: `${cimrtsIpRef.value}/ds/featuretiles/${datasetName.value}/${metallicRoughnessTexture.value.value}`,
            offset: metallicRoughnessTexture.value.translate,
            scale: metallicRoughnessTexture.value.scale,
            rotate: metallicRoughnessTexture.value.rotate,
        }
    }

    uiParam.value = { ...material }


    const result = materialEditing && await materialEditing.updateMaterial("default")
    if (result && result.type == "success") {
        requestAnimationFrame(() => {
            requestAnimationFrame(() => {
                console.log("material",material)
                materialEditing && materialEditing.updateMaterial({ "default": material })
            })
        })
    }
}, 100), { deep: true })

watch(() => props.currentMaterail, () => {
    nextTick(async () => {
        if (!materialEditing) {
            materialEditing = d.ad(new MaterialEditing(`materialContainer_${props.id}`))
            await materialEditing.init()
        }
        console.log("props.param", props.currentMaterail);
        await init()
    })
}, { immediate: true })

const handleDrop = (e: DragEvent) => {
    e.preventDefault();
    emits("dragEvent", props.id)
}

onMounted(() => {


});

</script>

<style scoped>
.box {
    padding: 10px 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    height: 100%;
}

.box-left {
    width: 400px;
    height: 100%;

}

.box-right {
    width: 260px;
    flex-direction: column;
    justify-content: space-between;
}

.base-uv {
    display: grid;
    grid-template-columns: 70px 150px;
    align-items: center;
    padding-bottom: 3px;
    grid-column-gap: 10px;


}

.base-texture {
    display: grid;
    grid-template-columns: 70px 120px 20px;
    align-items: center;
    padding-bottom: 3px;
    grid-column-gap: 10px;

}

.base-list {
    display: grid;
    grid-template-columns: 70px 70px 70px;
    align-items: center;
    padding-bottom: 3px;
    grid-column-gap: 10px;
}

.base-merge {
    display: flex;
    padding-bottom: 3px;
    gap: 20px;
}

.doubleSided-items {
    display: grid;
    grid-template-columns: 70px 40px;
    align-items: center;
}

.unlit-items {
    display: grid;
    grid-template-columns: 60px 40px;
    align-items: center;
}


.base-items {
    display: grid;
    grid-template-columns: 70px 150px;
    align-items: center;
    grid-column-gap: 10px;
    padding-bottom: 3px;

}

:deep(.el-select) {
    width: 150px;
}

:deep(.el-select__wrapper) {
    width: 150px;
}

.texture-content {
    height: calc(100% - 45px);
    overflow-y: auto;
}

.texture-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    height: 35px;

}

.el-select-dropdown__item {
    width: 150px;
}

.btns {
    display: flex;
    justify-content: space-around;
    height: 40px;
}

.active {
    background-color: #647bff !important;
    color: white !important;
    cursor: pointer !important;
}
</style>
